<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-answerBanner-add" enctype="multipart/form-data">
			<div class="form-group">	
				<label class="col-sm-3 control-label">名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">排序：</label>
				<div class="col-sm-8">
					<input id="sort" name="sort" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">启用状态</label>
				<div class="col-sm-8">
					<div class="input-group" style="width: 100%">
						<select name="status" class="form-control m-b"  lay-verify="required">
							<option  value="1">不启动</option>
							<option value="0">启动</option>
						</select>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">添加图片</label>
				<div class="col-sm-8">
					<div class="action">
						<div class="new-contentarea tc">
							<a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a>
							<input type="file"  name="avatar" onchange="xmTanUploadImg(this)" id="avatar" accept="image/*"/>
						</div>
						<img id="xmTanImg" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"/>
						<div id="xmTanDiv"></div>
					</div>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "system/answerBanner"
        //判断浏览器是否支持FileReader接口
        if (typeof FileReader == 'undefined') {
            document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
            //使选择控件不可操作
            document.getElementById("avatar").setAttribute("disabled", "disabled");
        }
        //选择图片，马上预览
        function xmTanUploadImg(obj) {
            var file = obj.files[0];

            console.log(obj);console.log(file);
            console.log("file.size = " + file.size);  //file.size 单位为byte

            var reader = new FileReader();

            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                var img = document.getElementById("xmTanImg");
                img.src = e.target.result;
                //或者 img.src = this.result;  //e.target == this
            }

            reader.readAsDataURL(file)
        }
        $("#form-answerCover-add").validate({
            rules:{
                xxxx:{
                    required:true,
                },
            },
            focusCleanup: true
        });

        function submitHandler() {
            paht=prefix+"/add"
            $.ajax({
                url:paht,
                type : "POST",
                async: false,
                cache: false,  //此处设置false
                contentType: false,//必须设置false ,formupload1表单中必须设置enctype="multipart/form-data"
                processData: false,  //必须设置fals
                data :new FormData(document.getElementById("form-answerBanner-add")),
                success:function (data) {
                    $.operate.successCallback(data);
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {

                }
            })
        }
	</script>
</body>
</html>
